<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Slide - 幻灯片特效</title>
<link rel="shortcut icon" href="../../../../kissy-dpl/base/assets/favicon.ico"/>
<link rel="stylesheet" href="../../../../kissy-dpl/base/assets/reset.css"/>
<link rel="stylesheet" href="../../../../kissy-dpl/base/assets/kissy-docs.css"/>

<link rel="stylesheet" href="../../../../kissy-dpl/base/build/css/loading.css"/>
<link rel="stylesheet" href="../../../../kissy-dpl/base/build/css/form.css"/>

<script src="../../../build/kissy.js"></script>
<script src="../../../../kissy-dpl/base/assets/kissy-docs.js"></script>
</head>
<body>
<div id="header">
    <h1 class="logo"><a alt="KISSY" href="http://kissyui.com/"><img src="../../../../kissy-dpl/base/assets/logo.png"/></a></h1>
    <div class="sub-title">Switchable</div>
    <ul class="navigation">
        <li><a href="http://blog.kissyui.com/">博客</a></li>
        <li><a href="http://github.com/kissyteam">源码</a></li>
    </ul>

</div>
<div id="content" class="form">
<div class="s-crumbs">
    <span>当前位置：</span>
    <a href="http://kissyui.com/">KISSY</a>
    <a href="http://docs.kissyui.com/docs/html/api/component/switchable/slide.html">slide</a>
    <span>Demo</span>
</div>

    <pre class="s-section">
功能：Slide
源码：<a href="../slide/base.js">../slide/base.js</a></pre>

<h3 class="s-title">Slide - 淘宝首页卡盘</h3>
<div class="s-section">
    <style>
        #demo2 {
            position: relative;
            width: 470px;
            height: 150px;
            border: 1px solid #B6D1E6;
            overflow: hidden;
        }

        #demo2 .ks-switchable-nav {
            position: absolute;
            bottom: 5px;
            right: 5px;
            z-index: 99;
        }

        #demo2 .ks-switchable-nav li {
            float: left;
            width: 16px;
            height: 16px;
            line-height: 16px;
            margin-left: 3px;
            background-color: #FCF2CF;
            border: 1px solid #F47500;
            color: #D94B01;
            text-align: center;
            cursor: pointer;
        }

        #demo2 .ks-switchable-nav li.ks-active {
            width: 18px;
            height: 18px;
            line-height: 18px;
            margin-top: -1px;
            color: #FFF;
            background-color: #FFB442;
            font-weight: bold;
        }

        #demo2 .ks-switchable-content li {
            height: 150px;
            width: 470px;
            overflow: hidden;
        }

            /* for countdown plugin */
        #demo2 .ks-switchable-nav li,
        #demo2 .ks-switchable-trigger-content {
            position: relative;
        }

        #demo2 .ks-switchable-trigger-mask {
            position: absolute;
            right: 0;
            width: 18px;
            height: 18px;
            background-color: #FF9415;
            visibility: hidden
        }

        #demo2 .ks-active .ks-switchable-trigger-mask {
            visibility: visible
        }

    </style>
    <div class="s-demo">
        <div id="demo2" class="section loading">
            <ol class="ks-switchable-content">
                <li><a href="http://www.taobao.com" target="_blank"><img alt="" src="http://img05.taobaocdn.com/tps/i5/T1HllqXjXpXXXXXXXX-470-150.jpg"/></a></li>
                <li class="hidden"><a target="_blank" href="http://www.taobao.com"><img alt="" width="470" height="150" border="0" src="http://img.alimama.cn/bcrm/adboard/picture/2009-12-24/091224170529.gif"/></a></li>
                <li class="hidden"><a target="_blank" href="http://www.taobao.com"><img alt="" width="470" height="150" border="0" src="http://img.alimama.cn/bcrm/adboard/picture/2009-12-29/091229160359.jpg"/></a></li>
                <li class="hidden"><a href="http://www.taobao.com" target="_blank"><img alt="" src="http://img01.taobaocdn.com/tps/i1/T1qS0qXhBhXXXXXXXX-470-150.jpg"/></a></li>
                <li class="hidden">
                    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="470" height="150" class="holiday-logo">
                        <param name="movie" value="http://img04.taobaocdn.com/tps/i4/T1bblrXfBrXXXXXXXX.swf"/>
                        <param name="quality" value="high"/>
                        <param name="swfversion" value="8.0.0"/>
                        <param name="wmode" value="opaque"/>
                        <!--[if !IE]>-->
                        <object type="application/x-shockwave-flash" data="http://img04.taobaocdn.com/tps/i4/T1bblrXfBrXXXXXXXX.swf" width="470" height="150" name="holiday-logo" class="holiday-logo">
                            <param name="wmode" value="opaque"/>
                        </object>
                        <!--<![endif]-->
                    </object>
                </li>
            </ol>
        </div>
        <button id="demo2-btn">stop autoplay</button>
        <script>
            KISSY.use("event,switchable", function(S, Event, Switchable) {
                var Slide = S.Slide;

                S.ready(function(S) {

                    var s = Slide('#demo2', {
                        effect: 'scrolly',
                        // slide特效组件其实不需要
                        aria:false,
                        easing: 'easeOutStrong'
                        //countdown: true,
                        //countdownFromStyle: 'width:18px'
                    });

                    window.slide = s;

                    Event.on('#demo2-btn', 'click', function() {
                        s.stop();
                    })
                });
            });
        </script>
    </div>
    <a class="s-view-code" href="#">显示源码</a>
</div>


<h3 class="s-title">Slide - 组合效果</h3>
<div class="s-section">
    <style>
        #slideFocus {
            border: 1px solid #C2C2C2;
            height: 284px;
            width: 678px;
            overflow: hidden;
        }

        #slideFocus .h {
            background: #f3f3f3;
            padding: 3px 0 7px 12px;
        }

        #slideFocus .c {
            padding: 9px 10px 0;
        }

        #slideFocus .pic {
            width: 379px;
            height: 233px;
            overflow: hidden;
            float: left;
        }

        #slideFocus .txt {
            width: 270px;
            float: right;
        }

        #slideFocus .desc-list h4 a {
            font-size: 14px;
            line-height: 25px;
            color: #f60;
        }

        #slideFocus .desc-list p {
            line-height: 18px;
            color: #666;
            margin: 10px 0;
        }

        #slideFocus .thumbs-list li {
            float: left;
            height: 62px;
            width: 84px;
            padding: 2px;
            margin: 1px;
            display: inline !important;
        }

        #slideFocus .thumbs-list li.current {
            background-color: #f60;
        }

        #slideFocus .des,
            /*#slideFocus .desc-list,*/
        #slideFocus .desc-list-wrap {
            width: 270px;
            height: 90px;
            overflow: hidden;
        }
    </style>
    <div id="slideFocus" class="s-demo">
        <div class="h">
            <h3>今日焦点视频</h3>
        </div>
        <div class="c">
            <div class="pic loading">
                <ul class="pic-list">
                    <li><a href="http://www.taobao.com" target="_blank"><img alt="" src="assets/t1.jpg"/></a></li>
                    <li><a href="http://www.taobao.com" target="_blank"><img alt="" src="assets/t2.jpg"/></a></li>
                    <li><a href="http://www.taobao.com" target="_blank"><img alt="" src="assets/t3.jpg"/></a></li>
                    <li><a href="http://www.taobao.com" target="_blank"><img alt="" src="assets/t4.jpg"/></a></li>
                    <li><a href="http://www.taobao.com" target="_blank"><img alt="" src="assets/t5.jpg"/></a></li>
                    <li><a href="http://www.taobao.com" target="_blank"><img alt="" src="assets/t6.jpg"/></a></li>
                </ul>
            </div>
            <div class="txt">
                <div class="desc-list-wrap">
                    <ul class="desc-list">
                        <li class="des">
                            <h4><a title="《神话》热播 第05集21:10分上线" target="_blank" href="http://www.taobao.com">《神话》热播 第05集21:10分上线</a></h4>
                            <p>秦代的刑场上，一个身着奇装异服的年轻人从天而降，众将士议论纷纷，不敢近前，不知是叛贼来劫法场，还是神仙妖孽下凡……</p>
                        </li>
                        <li class="des">
                            <h4><a target="_blank" href="http://www.taobao.com">2010年第一场强降雪飘落京城</a></h4>
                            <p>继昨日凌晨降下新年首场小雪，今日首场强降雪飘落京城，据气象台预计雪后北京将降温至-16℃，这也将创下近40年来的最低温记录。</p>
                        </li>
                        <li class="des">
                            <h4><a target="_blank" href="http://www.taobao.com">娱乐圈丑闻 导演张一白吸毒被抓</a></h4>
                            <p>正拍摄《杜拉拉升职记》的导演张一白因吸毒被抓，据传是其捧红的徐静蕾“告密”，衣食无忧、事业有成的明星，为何屡屡曝出吸毒丑闻？</p>
                        </li>
                        <li class="des">
                            <h4><a target="_blank" href="http://www.taobao.com">詹姆斯-卡梅隆传奇巨制《阿凡达》</a></h4>
                            <p>曾因《泰坦尼克号》创造过票房记录的好莱坞导演詹姆斯-卡梅隆，经过了14年的酝酿，耗资4亿美元拍制的科幻巨献《阿凡达》将于4日在中国上映！</p>
                        </li>
                        <li class="des">
                            <h4><a target="_blank" href="http://www.taobao.com">2009年大学生十大杯具事件</a></h4>
                            <p>从70岁老教授潜规则艺校女生，到上海贫困女硕士自杀，09年发生在大学生身上的是非真是多得来令人惊诧，除了心酸就只有“杯具”了。</p>
                        </li>
                        <li class="des">
                            <h4><a target="_blank" href="http://www.taobao.com">尚周刊 第三期</a></h4>
                            <p>全新《尚周刊》在新年里与大家新鲜见面。简约是本周最IN的街头风！闪亮派对妆是每个潮女必备美妆术！想了解更多时尚资讯来《尚周刊》！</p>
                        </li>
                    </ul>
                </div>
                <ul class="thumbs-list">
                    <li class="current"><img alt="" width="84" height="62"
                                             src="assets/t1.jpg"/></li>
                    <li><img alt="" width="84" height="62"
                             src="assets/t2.jpg"/></li>
                    <li><img alt="" width="84" height="62"
                             src="assets/t3.jpg"/></li>
                    <li><img alt="" width="84" height="62"
                             src="assets/t4.jpg"/></li>
                    <li><img alt="" width="84" height="62"
                             src="assets/t5.jpg"/></li>
                    <li><img alt="" width="84" height="62"
                             src="assets/t6.jpg"/></li>
                </ul>
            </div>
        </div>
        <script>
            KISSY.use("dom,event,anim,switchable", function(S, DOM, Event, Anim, Switchable) {
                var Slide = S.Slide,
                        Easing = S.Easing;

                S.ready(function(S) {

                    //var slide =
                    new Slide('#slideFocus', {
                        contentCls: 'pic-list',
                        navCls: 'thumbs-list',
                        activeTriggerCls: 'current',
                        effect: 'scrollx',
                        easing: Easing.easeOutStrong
                    });

                    // window.slide = slide;
                    // 两个拼起来
                    new Slide('#slideFocus', {
                        contentCls: 'desc-list',
                        navCls: 'thumbs-list',
                        activeTriggerCls: 'current',
                        circular:true,
                        effect: 'scrolly',
                        easing: Easing.easeOutStrong
                    });

                    // 或者监听事件
//                    var descList = DOM.children('#slideFocus ul.desc-list');
//                    slide.on('beforeSwitch', function(ev) {
//                        S.each(descList, function(desc, i) {
//                            desc.style.display = i === ev.toIndex ? 'block' : 'none';
//                        });
//                    });
                });
            });
        </script>
    </div>
    <a class="s-view-code" href="#">显示源码</a>
</div>

<h3 class="s-title">Slide - 右侧导航卡盘</h3>
<div class="s-section">
    <style>
        #demo3 {
            position: relative;
            width: 515px;
            height: 220px;
            border: 1px solid #D3D2D2;
            padding: 1px;
            overflow: hidden;
        }

        #demo3 .yslider-stick {
            position: absolute;
            top: 0;
            right: 0;
            width: 106px;
            font-size: 14px;
            background: #fff;
            margin: 1px;
            z-index: 99;
        }

        #demo3 .yslider-stick li {
            border-bottom: 1px solid #EDEDED;
        }

        #demo3 .yslider-stick li a {
            display: block;
            text-indent: 15px;
            padding: 8px 5px;
            color: #666;
        }

        #demo3 .yslider-stick li.selected {
            background-color: #C8282B;
        }

        #demo3 .yslider-stick li.selected a {
            color: #fff;
            border-left: 3px solid #B30024;
        }

        #demo3 .yslider-stage {
            height: 220px;
            width: 405px;
        }
    </style>

    <div id="demo3" class="s-demo">
        <div class="yslider-stage">
            <p><a href="http://www.taobao.com" target="_blank"><img width="405" height="220" alt="终极秒杀场" src="assets/y1.jpg"/></a></p>
            <p><a href="http://www.taobao.com" target="_blank"><img width="405" height="220" alt="9折话费" src="assets/y2.jpg"/></a></p>
            <p><a href="http://www.taobao.com" target="_blank"><img width="405" height="220" alt="彩票大派送" src="assets/y3.jpg"/></a></p>
            <p><a href="http://www.taobao.com" target="_blank"><img width="405" height="220" alt="限量抢购" src="assets/y4.jpg"/></a></p>
            <p><a href="http://www.taobao.com" target="_blank"><img width="405" height="220" alt="周末购" src="assets/y5.jpg"/></a></p>
            <p><a href="http://www.taobao.com" target="_blank"><img width="405" height="220" alt="年终风暴" src="assets/y6.jpg"/></a></p>
        </div>
        <ul class="yslider-stick">
            <li class="selected"><a href="http://www.taobao.com" target="_blank">年终风暴</a></li>
            <li><a href="http://www.taobao.com" target="_blank">终极秒杀场</a></li>
            <li><a href="http://www.taobao.com" target="_blank">9折话费</a></li>
            <li><a href="http://www.taobao.com" target="_blank">彩票大派送</a></li>
            <li><a href="http://www.taobao.com" target="_blank">限量抢购</a></li>
            <li><a href="http://www.taobao.com" target="_blank">周末购</a></li>
        </ul>

        <script>
            KISSY.use("event,switchable", function(S, Event, Switchable) {
                var Slide = S.Slide;
                S.ready(function(S) {
                    Slide('#demo3', {
                        navCls: 'yslider-stick',
                        contentCls: 'yslider-stage',
                        activeTriggerCls: 'selected',
                        delay: .2,
                        effect: 'fade',
                        easing: 'easeBoth',
                        duration: .8,
                        autoplay: false
                    });
                });
            });
        </script>
    </div>
    <a class="s-view-code" href="#">显示源码</a>
</div>


<h3 class="s-title">Slide - 滚动新闻条</h3>
<div class="s-section">
    <style>
        .scroll-news {
            height: 20px;
            overflow: hidden;
        }

        .scroll-news a {
            color: #FF7E00;
        }
    </style>
    <div class="s-demo">
        <div id="demo5" class="section scroll-news">
            <ul class="news-items">
                <li><a target="_blank" href="http://www.taobao.com">“一分钱”轻松体验</a></li>
                <li><a target="_blank" href="http://www.taobao.com">开通网银</a></li>
                <li><a target="_blank" href="http://www.taobao.com">新手买家</a></li>
                <li><a target="_blank" href="http://www.taobao.com">尽情挥洒你的创意</a></li>
                <li><a target="_blank" href="http://www.taobao.com">认准标识</a></li>
                <li><a target="_blank" href="http://www.taobao.com">收藏</a></li>
            </ul>
        </div>
        <script>
            KISSY.use("event,switchable", function(S, Event) {
                var Slide = S.Slide;
                S.ready(function(S) {
                    Slide('#demo5', {
                        contentCls: 'news-items',
                        hasTriggers: false,
                        effect: 'scrolly',
                        easing: 'easeOutStrong',
                        interval: 3,
                        duration: .2
                    });
                });
            });
        </script>

    </div>
    <a class="s-view-code" href="#">显示源码</a>
</div>

<h3 class="s-title">键盘快捷键</h3>
<div class="s-section">
    <ul class="s-list">
        <li>tab 进入卡盘时，停止自动播放</li>
        <li>上/左键：当焦点位于卡盘时，切换到上一个slide</li>
        <li>下/右键：当焦点位于卡盘时，切换到下一个slide</li>
        <li>tab 离开卡盘时，开始自动播放</li>
    </ul>
</div>
</div>
</body>
</html>